<template>
  <!--  判断传入的sort_list是否为空，空则不遍历-->
  <div>
    <scroll
      class="sort_scroll"
      ref="scroll"
      @scroll="contentScroll" >
      <div v-if="sort_list" class="sort_content">
        <div class="sort_item" v-for="item in sort_list.list">
          <a :href="item.link">
            <img :src="item.image"
              width="50px" height="50px">
          </a>
          <p>{{item.title}}</p>
        </div>
        <div v-show="sort_list.list.length%3" style="width: 66%;"></div>
        <tar-control
          class="titles"
          :titles="['综合', '新品', '销量']"
          @tabClick="tabClick"/>


        <category-good-list :subcategory_type="subcategory_type" />
      </div>


    </scroll>
    <back-top @click.native="backClick" v-show="isShowBackTop"/>

  </div>


</template>

<script>
  import Scroll from "components/common/scroll/Scroll";
  import TarControl from "components/content/tarControl/TarControl";
  import {NEW, POP, SELL,BACK_POSITION} from "@/common/const";
  import GoodsList from "components/content/goods/GoodsList";
  import GoodsListItem from "components/content/goods/GoodsListItem";
  import CategoryGoodList from "./CategoryGoodList";
  import {itemListenerMixin,backTopMixin,tabControlMixin} from "common/mixin";

  export default {
    name: "CategorySort",
    components: {
      CategoryGoodList,
      GoodsListItem,
      GoodsList,
      TarControl,
      Scroll,
    },
    props: {
      sort_list: {
        default: {},
        type: Object
      }
    },
    mixins:[itemListenerMixin,backTopMixin,tabControlMixin],
    data() {
      return {
        counter: 0,
      }
    },
    // 离开时调用
    deactivated() {

      // 2.取消全局事件
      this.$bus.$off('itmImgLoad', this.itemImgListener)
    },
    methods: {
      contentScroll(position) {
        this.isShowBackTop = (-position.y) > BACK_POSITION
      }
    },
    computed: {
      subcategory_type() {
        return this.sort_list[this.currentType]
      }
    }
  }
</script>

<style scoped>


  .sort_scroll {
    height: calc(100vh - 55px - 49px);
    overflow: hidden;
  }

  .sort_content {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    text-align: center;
  }

  .sort_content .sort_item {
    width: 33%;
  }

  * {
    touch-action: pan-y;
  }

  .titles {
    display: flex;
    width: 100%;
    font-size: 15px;
    justify-content: space-around;
  }


</style>
